<style lang="scss" scoped>
#targetSpot{
    .fontWeight{
        font-weight:700;
    }
}
</style>
<template>
    <div id="targetSpot" class="content-mask" v-loading = "loading">
        <div class="card">
            <div class="card-title"> <span class="title-main">靶点：{{targetObject.preferredname}}</span> </div>
            <div class="card-detail">
                <el-row>
                    <el-col class="fontWeight" :span="4">靶点名称</el-col>
                    <el-col :span="20">{{targetObject.preferredname}}</el-col>
                </el-row>
                <el-row>
                    <el-col class="fontWeight" :span="4">别名</el-col>
                    <el-col :span="20">{{targetObject.synonyms}}</el-col>
                </el-row>
                <el-row>
                    <el-col class="fontWeight" :span="4">靶点类型</el-col>
                    <el-col :span="20">{{targetObject.targettype}}</el-col>
                </el-row>
                <el-row>
                    <el-col class="fontWeight" :span="4">Uniprot 登录号</el-col>
                    <el-col :span="20">{{targetObject.accession}}</el-col>
                </el-row>
                <el-row>
                    <el-col class="fontWeight" :span="4">物种来源</el-col>
                    <el-col :span="20">{{targetObject.organism}}</el-col>
                </el-row>
                <el-row>
                    <el-col class="fontWeight" :span="4">分类路径</el-col>
                    <el-col :span="20">{{targetObject.proteintargetclassification}}</el-col>
                </el-row>
            </div>
        </div>
        <div class="card">
            <div class="card-title">
                <img src="static/image/xgyw.png" >
                <span class="title-text">相关药物</span>
            </div>
            <div class="card-detail">
                <el-row>
                    <el-col :span="6" style="font-weight:700">药物名称</el-col>
                    <el-col :span="6" style="font-weight:700">中文名</el-col>
                    <el-col :span="6" style="font-weight:700">药物名称</el-col>
                    <el-col :span="6" style="font-weight:700">中文名</el-col>
                </el-row>
                <el-row class="drug-content-table" v-if="drugList[2*index]" v-for="(item,index) in drugList" :key="index">
                    <el-col v-if="drugList[2*index]" :span="6"><a @click="goDrug(drugList[2*index].id)">&nbsp;{{drugList[2*index].drugName}}&nbsp;</a></el-col>
                    <el-col v-if="drugList[2*index]" :span="6">&nbsp;{{drugList[2*index].chName}}&nbsp;</el-col>
                    <el-col v-if="drugList[2*index+1]" :span="6"><a @click="goDrug(drugList[2*index+1].id)">&nbsp;{{drugList[2*index+1].drugName}}&nbsp;</a></el-col>
                    <el-col v-if="drugList[2*index+1]" :span="6">&nbsp;{{drugList[2*index+1].chName}}&nbsp;</el-col>
                </el-row>
            </div>            
        </div>
    </div>
</template>
<script>
import {medicine} from 'api/index.js';
export default {
    name: "targetSpot", //靶点
    data() {
        return {
            targetId:"",
            loading:false,
            targetObject:{},
            drugList:[]
        };
    },
    methods: {
        //获取靶点信息
        getTarget(){
            var obj={
                id : this.targetId
            }
            this.loading = true;
            medicine.getTargetById(obj).then((data)=>{
                if(data.status == 200){
                    if(data.data){
                        this.targetObject = data.data;
                        this.getDrugList();
                    }
                }else{
                    this.$message.error(data.msg);
                }
                this.loading = false;
            }).catch(error => {
                this.$message.error("获取靶点详情失败");
                this.loading = false;
            });
        },
        //获取药物列表
        getDrugList(){
            if(this.targetObject.drugList && this.targetObject.drugList.length>0){
                this.drugList = this.targetObject.drugList;
            }else{
                this.drugList = []
            }
        },
        goDrug(id){
            this.$store.state.searchType = 1;
            this.$store.state.searchId = id;
            sessionStorage.setItem("searchId", id);
            this.$router.push("/basic");
        }
    },
    mounted() {
        this.targetId = M.url().targetId ? M.url().targetId : '';
        this.getTarget();
    },
};
</script>